<template>
    <div>
        <div class="ZhuCeBoxs">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <div class="ZhuCeTitleOne">
                            <p>SEEK ADVICE FROM</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="ZhuCeTitleTwo">
                            <p>现在咨询 立享优惠</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="ZhuCeTitleThree">
                            <p>
                                <i class="el-icon-arrow-down"></i>

                            </p>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="ZhuCeTitleFour">
                    <el-col :span="24">
                        <div class="register-box-content col-lg-4 col-md-8 col-sm-8">
                            <el-input type="text" v-model="input" placeholder="请输入你的手机号" maxlength="11"></el-input>
                            <button class="LjRegister" @click="gotozixun">立即咨询</button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input: '',
        }
    },
    methods:{
        gotozixun(){
            this.$router.push({
				    path: '/seekadfrom'
				})
        }
    }
}
</script>
<style scoped>
.ZhuCeBoxs {
    width: 100%;
    margin: 0 auto;
    background-image: url('../../assets/images/banner/RegisterBgc.png');
    background-size: 100% 100%;
    overflow: hidden;

    .ZhuCeTitleOne {
        p {
            text-align: center;
            margin-top: 190px;
            font-weight: 500;
            font-size: 22px;
            color: #FFFFFF;
        }
    }

    .ZhuCeTitleTwo {
        p {
            text-align: center;
            font-weight: 500;
            font-size: 48px;
            color: #FFFFFF;
        }

    }

    @media screen and (max-width: 1200px) {
        .ZhuCeTitleOne {
            p {
                text-align: center;
                margin-top: 190px;
                font-weight: 500;
                font-size: 20px;
                color: #FFFFFF;
            }
        }

        .ZhuCeTitleTwo {
            p {
                text-align: center;
                font-weight: 500;
                font-size: 36px;
                color: #FFFFFF;
            }

        }

        .ZhuCeTitleFour {
            margin: 40px 0px 110px 0px;
            box-sizing: border-box;
        }

        
    }

    @media screen and (max-width: 500px) {
        .ZhuCeTitleOne {
            p {
                text-align: center;
                margin-top: 190px;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
            }
        }

        .ZhuCeTitleTwo {
            p {
                text-align: center;
                font-weight: 500;
                font-size: 24px;
                color: #FFFFFF;
            }

        }
    }

    .ZhuCeTitleThree {
        p {
            text-align: center;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            margin-top: 20px 0px;
        }
    }
}

.register-box {
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin: 50px 0px;
    box-sizing: border-box;
    margin-bottom: 120px;

}

.ZhuCeTitleFour {
    margin: 40px 0px 110px 0px;
    box-sizing: border-box;
}

.register-box-content {
    margin: 0 auto;
    position: relative;
    height: 50px;

    .register-input {
        /* width: 200px; */
        height: 40px;
        border-radius: 30px;
        border: 1px solid #cccccc;
        font-size: 12px;
        background-color: #fff;

    }

    .LjRegister {
        width: 40%;
        border: none;
        color: #fff;
        height: 38px;
        font-size: 16px;
        background-color: #61c3d0;
        border-radius: 30px;
        position: absolute;
        right: 0px;
        top: 1px;
    }
}

::v-deep .el-input__inner {
    border-radius: 30px;
}
</style>